<template>
    <div class="com-container">
        <div class="title" :style="titleStyle" ref="title_com" :class="{title_dark_theme:isDarkTheme, title_light_theme: !isDarkTheme }">
            <span>{{ showTitle }}</span>
            <span class="iconfont title_icon" @click="ifShow=!ifShow" :style="titleStyle">&#xe6eb</span>
            <div class="select_con" v-show="ifShow" :class="{ select_con_dark_theme: isDarkTheme, select_con_light_theme: !isDarkTheme }">
                <div class="select_item" v-for="item in selectTypes" :key="item.key"
                @click="handleSelect(item.key)"
                >{{ item.text }}</div>
            </div>
        </div>
            <div class="com-echart" ref="trend_ref">
                
            </div>
          <ReSize :comName="'trend'"></ReSize>   
    </div>

</template>

<script setup>
import { ref,computed,onMounted,onUnmounted,watch } from 'vue';
import { getTrendDataService } from '@/api';
import { markRaw } from 'vue';
import ReSize from './ReSize.vue';
import { useThemeStore } from '@/stores';
const themeStore = useThemeStore()


const chartInstance=ref(null)
const trend_ref=ref(null)
const initChart=()=>{
    chartInstance.value=markRaw(echarts.init(trend_ref.value, themeStore.currentTheme))
    const initOption={
         xAxis: {
            type:'category',
            boundaryGap:false
        },
        yAxis: {
            type:'value'
        },
        grid:{
            left:'3%',
            top:'35%',
            containLabel:true
        },
        tooltip:{
            trigger:'axis'
        },
        legend:{
            left:20,
            top:'15%',
            icon:'circle'
        }
    }
    chartInstance.value.setOption(initOption)

}


const dataList=ref([])
const getTrendData=(ret)=>{
    dataList.value=ret
    updateChart()
}



const updateChart=()=>{
    const colorArr1 = [
        'rgba(11, 168, 44, 0.5)',
        'rgba(44, 110, 255, 0.5)',
        'rgba(22, 242, 217, 0.5)',
        'rgba(254, 33, 30, 0.5)',
        'rgba(250, 105, 0, 0.5)'
    ]
    // 全透明的颜色值
    const colorArr2 = [
        'rgba(11, 168, 44, 0)',
        'rgba(44, 110, 255, 0)',
        'rgba(22, 242, 217, 0)',
        'rgba(254, 33, 30, 0)',
        'rgba(250, 105, 0, 0)'
    ]
    const timeArr=dataList.value.common.month
    const valueArr=dataList.value[choiceType.value].data
    const seriesArr=valueArr.map((e,index)=>{
        return {
            name:e.name,
            type:'line',
            data:e.data,
            stack:'map',
            areaStyle:{
                color: new echarts.graphic.LinearGradient(
                    0,0,0,1,
                    [
                        {
                            offset:0,
                            color:colorArr1[index]
                        },
                        {
                            offset: 1,
                            color: colorArr2[index]
                        }
                    ]
                )
            }
        }
    })
    const legendArr=valueArr.map(e=>e.name)
    const dataOption={
        xAxis:{
            data:timeArr
        },
        legend:{
            data:legendArr
        },
       series:seriesArr
    }
     chartInstance.value.setOption(dataOption)
}


const titleFontSize=ref(0)
const titleStyle=computed(()=>{
    return {
        fontSize:titleFontSize.value+'px'
    }
})
const screenAdaptor = () => {
    titleFontSize.value=trend_ref.value.offsetWidth/100*3.6

    const adaptOption = {
        legend: {
            itemWidth:titleFontSize.value/2,
            itemHeight:titleFontSize.value/2,
            itemGap:titleFontSize.value/2,
            textStyle:{
                fontSize:titleFontSize.value/2
            },
        }
    }
    chartInstance.value.setOption(adaptOption)
    chartInstance.value.resize()
}


const ifShow=ref(false)
const choiceType=ref('map')
const selectTypes=computed(()=>{
    if(!dataList.value) return []
    else{
        if(Array.isArray(dataList.value.type))
        return (dataList.value.type).filter(obj => obj.key != choiceType.value)
    }
})
const showTitle=computed(()=>{
     if (!dataList.value) return ''
     return dataList.value[choiceType.value].title
})


const handleSelect=(key)=>{
    choiceType.value=key
    updateChart()
    ifShow.value=false
}


SocketService.registerCallBack('trendData', getTrendData)

defineExpose({
    screenAdaptor
})


const title_com=ref(null)
watch(() => themeStore.currentTheme, () => {
    chartInstance.value.dispose()
    initChart()
    updateChart()
    screenAdaptor()
    
})
const isDarkTheme = computed(() => {
    return themeStore.currentTheme === 'chalk'
})

onMounted(()=>{
    initChart()
    SocketService.send({
        action: 'getData',
        socketType: 'trendData',
        chartName: 'trend',
        value: ''
    })
    window.addEventListener('resize', screenAdaptor)
    screenAdaptor()
})

onUnmounted(()=>{
     window.removeEventListener('resize', screenAdaptor)
})
</script>

<style scoped>
.com-container{
    position: relative;
}
.title{
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 100;
   font-weight: bold;
}

.title_icon{
    margin-left: 10px;
    cursor: pointer;
}

.select_item{
   cursor: pointer;
}

.title_dark_theme{
    color: white;
}
.title_light_theme{
    color: black;
}
.select_con_dark_theme{
     background-color: #222733;
     color: white;
}
.select_con_light_theme{
     background-color: white;
}
</style>